<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
		<title>fwj08-2</title>
		<style type="text/css">
			:root {
				--main-bg-color: #590d4a;
				--main-element-color: #a31b88;
				--main-button-color: #33062a;
			}
			#paragraph {
				color: black;
				font-family: 'Oswald', sans-serif;
				font-size: 40px;
				background-color: var(--main-element-color);
				width: 100%;
				height: 150px;
				text-align: center;
				line-height: normal;
			}
			#block1{
				color: black;
				font-family: 'Oswald', sans-serif;
				font-size: 40px;
				background-color: var(--main-element-color);
				width: 48%;
				height: 250px;
				border: 5px;
				text-align: center;
				float: left;
			}
			#block2{
				color: black;
				font-family: 'Oswald', sans-serif;
				font-size: 40px;
				background-color: var(--main-element-color);
				width: 48%;
				height: 250px;
				border: 5px;
				text-align: center;
				float: right;
			}
			#block3{
				color: black;
				font-family: 'Oswald', sans-serif;
				top: 40px;
				font-size: 40px;
				background-color: var(--main-element-color);
				width: 100%;
				height: 250px;
				border: 5px;
				text-align: center;
				margin-top: 20px;
				float: left;
			}
			button {
				background-color: var(--main-bg-color);
				border: 0;
				width: 15%;
				height: 40px;
			}
			body {
				background-color: var(--main-bg-color);
			}
			#lilOption {
				
			}
			
		</style>
	</head>
	<body>
		<div id="paragraph" float="top">
			Cadastro de não sei o que<br>
			<button id="botao" value="Enviar Submissão!" onclick="showOptions()">Enviar Submissão!</button>
		</div>
		<br />
		<div id="block1">
			Seu Nome<br>
			<input type="text" id="txtNome">
		</div>
		<div id="block2">
			Seu e-mail<br>
			<input type="text" id="txtEmail">
		</div>
		<div id="block3">
			Li e aceito tudo o que você me empurrar<br>
			<input type="checkbox" id="lilOption" onclick="showBotao2()"><br>
			<button id="botao2" value="Enviar Submissão!" onclick="showOptions()">Enviar Submissão!</button>
		</div>
	</body>
</html>
<script lang="javascript" src="jquery-3.3.1.min.js"></script>
<script lang="javascript">
	$("#block1").hide(0);
	$("#block2").hide(0);
	$("#block3").hide(0);
	function showOptions(){
		$("#block1").slideDown(700);
		$("#block2").slideDown(700);
		$("#block3").slideDown(700);		
		$("#botao").hide(700);
	}
</script>